<template>
  <div class="CompetitionLnterfacePanel">
    <div>
      <span>{{ State.CompetitionName }}</span>
    </div>
    <div class="SponsorInformation">
      <div><span>主办 ： </span><span>{{State.sponsor}}</span></div>
      <div><span>承办 ：</span><span>{{State.undertaker}}</span></div>
      <div><span>技术支持 ：</span><span>{{State.technicalsupport}}</span></div>
    </div>
    <div class="CompetitionDescription">
      <div class="CompetitionExplain">
        <!-- <el-scrollbar class="elscrollbar"> -->
        <div
          class="CompetitionExplain-model"
          v-for="(item, index) in State.clausearr"
          :key="index"
        >
          <span>{{ item.clause }}</span>
        </div>
        <!-- </el-scrollbar> -->
      </div>
    </div>
    <div class="CompetitionBtn" v-if="State.BtnDisabled === 0 || State.BtnDisabled === 1 || State.BtnDisabled === 2">
      <div>
        <span>{{ State.BtnName }}</span>
      </div>
    </div>
    <div class="CompetitionBtn" @click="StartMath" v-if="State.BtnDisabled === 3">
      <div>
        <span>开始</span>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRef, toRefs, onMounted } from "vue";

import { postData, SecondToTime } from "@/assets/js/pubilcs.js";
export default defineComponent({
  name: "CompetitionLnterface",
  components: {},
  props: {
    MathItem: {
      type: Object,
      default: {},
    },
  },
  setup(props, ctx) {
    // props.MathItem.startTime = "2021-11-30T09:25:00";
    let State = reactive({
      CompetitionName: props.MathItem.name,
      clausearr: [
        { clause: "比赛须知" },
        { clause: "1.比赛前15分钟进入系统，做好身份验证." },
        { clause: "2.比赛期间禁止查看手机，禁止相互交流." },
        {
          clause:
            "3.比赛过程因设备损坏、网络故障等因素导致成绩未正常提交，视为成绩无效",
        },
        { clause: "4.提前提交成绩后，需静坐等待比赛结束后才可离开考场" },
      ],
      BtnName: "开始",
      BtnNameTime: "",
      BtnDisabled: 3,
      MathValue:'',
      //主办
      sponsor:'',
      //承办
      undertaker:"",
      //技术支持
      technicalsupport:'苏州衡鸿信息科技有限公司'
    });
    function XXXXX() {
      //创建的时间
      let dateTme = new Date(props.MathItem.startTime);
      //最新的时间
      //显示主办方等信息
      let newdateTme = new Date();
      console.log(dateTme,newdateTme);
      if (dateTme.getTime() - newdateTme.getTime() > 0) {
        State.BtnName = SecondToTime(
          Math.ceil((dateTme.getTime() - newdateTme.getTime()) / 1000)
        );
        console.log(State.BtnName);
      }else {
        clearInterval(State.BtnNameTime);
        State.BtnDisabled = 3;
        State.BtnNameTime = null;
      }
    }
    function SetMathInformation(){
      if(props.MathItem.sponsor){
        State.sponsor = props.MathItem.sponsor
      }else{
        State.sponsor = "暂无"
      }

      if(props.MathItem.undertaker){
        State.undertaker = props.MathItem.undertaker
      }else{
        State.undertaker="暂无"
      }

      if(props.MathItem.technicalsupport){
        State.technicalsupport = props.MathItem.technicalsupport
      }else{
        State.technicalsupport = "苏州衡鸿信息科技有限公司"
      }
    }
    //进入比赛后获取该比赛的详细信息
    function GetMathInformation() {
      postData("/api/SkillsContest/GetState",JSON.stringify({UserId:sessionStorage.getItem("userid"),SCInformationId:props.MathItem.id}),sessionStorage.getItem("token")).
      then(function (rep) {
        if(rep.success){
          State.BtnDisabled=rep.result.result
          if(State.BtnDisabled===0){
            State.BtnNameTime = setInterval(XXXXX(),1000);
            clearInterval(State.BtnNameTime);
            State.BtnNameTime = setInterval(XXXXX,1000);
          }
          if(State.BtnDisabled===1){
            State.BtnName = "已开始"
          }
          if(State.BtnDisabled===2){
            State.BtnName = "已提交"
          }

        }
      })
      .catch((error) => {
        console.log(error)
      });
    }
    async function ProducLocalStorageSaveReques(MathValue){
      let rep  = await Application.PostMessageAsync(Opcode.SessionStorageSaveRequest,{Key:"Product",Value:JSON.stringify(MathValue)});
      if(rep.Success){
        let id = props.MathItem.productId
        let ProductInventoryArr = JSON.parse(sessionStorage.getItem("ProductInventoryArr"))
        let ShortName = ''
        let Type=''
        let Launcher = ''
        let Executer=''
        for(let i =0;i<ProductInventoryArr.length;i++){
          if("P100"+ id ===ProductInventoryArr[i].number){
            ShortName=ProductInventoryArr[i].number
            Type = parseInt(ProductInventoryArr[i].type)
            Launcher = ProductInventoryArr[i].launcher
            if(ProductInventoryArr[i].executer===null){
              Executer=''
            }else{
              Executer=ProductInventoryArr[i].executer
            }
          }
        }
        let rep = await Application.PostMessageAsync(Opcode.ProductLaunchRequest,{Type:Type,Id:id,ShortName:ShortName,DisplayName:"",Launcher:Launcher,Executer:Executer,Framerate:60,Key:"Product"});
      }
    }
    //开始比赛
    function StartMath(){
      let content = props.MathItem.content.split(",")
      let projectIdarr = []
      for(let i=0;i<content.length;i++){
        projectIdarr.push(parseInt(content[i]))
      } 
      postData("/api/SkillsContest/Start",JSON.stringify({UserId:sessionStorage.getItem("userid"),SCInformationId:props.MathItem.id}),sessionStorage.getItem("token")).
      then(function (rep) {
        console.log('rep.result.result.model',rep.result.result.model);
        if(rep.result.success){
          //显示按钮
          State.BtnDisabled=1
          //显示标题
          State.BtnName="已开始"
          //储存后端需要的对象
          State.MathValue = {
            Token:sessionStorage.getItem("token"),
            FaultPointCollection:projectIdarr,
            Duration:props.MathItem.duration*60,
            ResultId:rep.result.result.resultId,
            Mode:rep.result.result.model,
            UserName:sessionStorage.getItem("UserName"),
            Content:props.MathItem.content,
          }
          //储存比赛信息
          ProducLocalStorageSaveReques(State.MathValue)
        }
      })
      .catch((error) => {
        console.log(error)
      });
    }
    onMounted(async () => {
      GetMathInformation()
      SetMathInformation()
    });
    return {
      State,
      StartMath
    };
  },
});
</script>
<style lang="less">
.CompetitionLnterfacePanel {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}

.CompetitionLnterfacePanel > div:nth-child(1) {
  width: 100%;
  min-height: 40px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #81859c;
  font-family: Source Han Sans CN;
  font-weight: 400;
}
.SponsorInformation {
  margin-top: 30px;
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.SponsorInformation > div:nth-child(1) span,
.SponsorInformation > div:nth-child(2) span,
.SponsorInformation > div:nth-child(3) span {
  font-size: 24px;
  color: #5d6177;
  font-family: Source Han Sans CN;
}

.SponsorInformation > div:nth-child(1) > span:nth-child(2),
.SponsorInformation > div:nth-child(2) > span:nth-child(2),
.SponsorInformation > div:nth-child(3) > span:nth-child(2) {
  font-weight: 600;
}
.CompetitionLnterfacePanel > div:nth-child(3) {
  margin-top: 10px;
  width: 100%;
  height: calc(100% - 260px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.CompetitionExplain {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  height: 80%;
  flex-direction: column;
}
// .CompetitionExplain .elscrollbar{
//     position: absolute;
//     height: 100%;
//     width: 100%;
// }
// .CompetitionDescription .el-scrollbar__wrap{
//   overflow-x: hidden;
// }
.CompetitionExplain-model {
  margin-top: 10px;
  margin-left: 15px;
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #5d6177;
  font-family: Source Han Sans CN;
  font-weight: 100;
}
.CompetitionExplain-model > span:nth-child(1) {
  font-size: 26px;
}
.CompetitionBtn {
  width: 100%;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.CompetitionBtn > div:nth-child(1) {
  width: 160px;
  height: 80px;
  font-size: 24px;
  border-radius: 10px;
  border: 1px solid #e6e7ebff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.CompetitionBtn > div:nth-child(1):hover {
  background: linear-gradient(90deg, #807de1, #218cde);
  color: #ffff;
}
</style>
